import React from 'react';
import styles from './index.less';
import { Form, Input, Button, Checkbox, message } from 'antd';
import { connect } from 'umi';
import IconFont from '@basicComp/IconFont';
import IconInput from '@basicComp/IconInput';
import { draw } from '@/utils/setCanvas';

@connect(({}) => ({}))
export default class extends React.Component {
  state = {
    show_num: [],
    securityCode: '',
  };
  componentDidMount() {
    this.tagCanvas();
  }
  // 验证码
  tagCanvas = () => {
    let { show_num } = this.state;
    let datas = draw(show_num);
    this.setState({
      security: datas,
      securityCode: datas.join(''),
    });
  };
  // 表单提交
  onFinish = async values => {
    const { securityCode } = this.state;
    if (securityCode.toUpperCase() != values.securityCode.toUpperCase()) {
      message.error('验证码不正确');
      return;
    }
    var rs = await this.props.dispatch({
      type: 'login/login',
      payload: {
        username: values.username,
        password: values.password,
        autoLogin: values.autoLogin,
      },
    });
    if (!rs.success) {
      message.error('登录失败');
    }
    if (rs.success) {
      message.success('登录成功');
    }
  };
  render() {
    return (
      <div className={styles.pageRoot}>
        <img className={styles.bg} src={require('./img/earthUp.png')} />

        <div className={styles.loginBox}>
          <div className={styles.logo}>
            microApp-scaffold
          </div>

          <div className={styles.describe}>
            <div className={styles.text1}>欢迎登录</div>
            <div className={styles.text2}>Welcome to Log on</div>
            <div className={styles.text3}>用户名admin密码123456</div>
          </div>

          <div className={styles.form}>
            <IconInput>
              <Form onFinish={this.onFinish}>
                <Form.Item
                  name="username"
                  rules={[{ required: true, message: '请输入用户名!' }]}
                >
                  <Input
                    prefix={
                      <IconFont
                        type="icon-yonghuming"
                        className={styles.icon}
                      />
                    }
                    placeholder="请输入用户名"
                  />
                </Form.Item>
                <Form.Item
                  name="password"
                  rules={[{ required: true, message: '请输入密码!' }]}
                >
                  <Input.Password
                    type="password"
                    prefix={
                      <IconFont type="icon-mima" className={styles.icon} />
                    }
                    placeholder="请输入密码"
                  />
                </Form.Item>

                <div className={styles.code}>
                  <div style={{ flex: '1', marginRight: '16px' }}>
                    <Form.Item
                      name="securityCode"
                      rules={[{ required: true, message: '请输入验证码!' }]}
                    >
                      <Input
                        prefix={
                          <IconFont
                            type="icon-yanzhengma"
                            className={styles.icon}
                          />
                        }
                        placeholder="请输入验证码"
                      />
                    </Form.Item>
                  </div>
                  <div className={styles.right}>
                    <canvas
                      className={'search_canvas'}
                      style={{ width: '100%', height: '100%' }}
                      onClick={() => {
                        this.tagCanvas();
                      }}
                    ></canvas>
                  </div>
                </div>

                <div className={styles.button} style={{ marginBottom: '14px' }}>
                  <Button block htmlType="submit">
                    <span>登</span>
                    <span>录</span>
                  </Button>
                </div>

                <div className={styles.checkbox}>
                  <Form.Item>
                    <Form.Item name="autoLogin" valuePropName="checked" noStyle>
                      <Checkbox>自动登录</Checkbox>
                    </Form.Item>
                  </Form.Item>
                </div>
              </Form>
            </IconInput>
          </div>
        </div>
      </div>
    );
  }
}
